<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="img/favicon.ico" type="image/x-icon"/>
    <link type="text/css" rel="stylesheet" href="lib/4.10/esri/css/main.css">
    <link href="css/index.css" rel="stylesheet" type="text/css">

</head>
<body>

<script>
    dojoConfig = {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        baseUrl: "lib/4.10/dojo/",
        parseOnLoad: false,
        //用于页面加载时立即加载的JS依赖
        packages: [{
            name: "myModule",
            location: location.pathname.replace(/\/[^/]*$/, '') + "/module",
            main: "UIControl"
        }]
    }
</script>
<div id="map"></div>
<div id="topbar">
    <button class="action-button esri-icon-minus" id="distanceButton" type="button"
            title="测距"></button>
    <button class="action-button esri-icon-polygon" id="areaButton" type="button"
            title="侧面积"></button>
</div>
<div id="rightbar">
    <button class="action-button esri-icon-layer-list" id="layerButton" type="button"
            title="图层管理"></button>
    <button class="action-button esri-icon-basemap" id="baseMapButton" type="button"
            title="底图切换"></button>
</div>
<div id="baseMapDiv">
    <div>
        <ul>
            <li class="choose" onclick="setBaseMap(this,'osm')">
                <img src="img/osm.png">
                <a>Open Street Map</a>
            </li>
            <li onclick="setBaseMap(this,'satellite')">
                <img src="img/satellite.png">
                <a>ESRI卫星图</a>
            </li>
            <li onclick="setBaseMap(this,'hybrid')">
                <img src="img/hybird.png">
                <a>hybrid</a>
            </li>
            <li onclick="setBaseMap(this,'terrain')">
                <img src="img/terrin.png">
                <a>地形图</a>
            </li>
            <li onclick="setBaseMap(this,'1')">
                <img src="img/google.png">
                <a>谷歌地图</a>
            </li>
            <li onclick="setBaseMap(this,'2')">
                <img src="img/googles.png">
                <a>谷歌卫星图</a>
            </li>
            <li onclick="setBaseMap(this,'4')">
                <img src="img/googley.png">
                <a>谷歌晕渲图</a>
            </li>
            <li onclick="setBaseMap(this,'5')">
                <img src="img/gaode.png">
                <a>高德地图</a>
            </li>
            <li onclick="setBaseMap(this,'3')">
                <img src="img/night.png">
                <a>夜间模式</a>
            </li>
        </ul>
    </div>
</div>
<script src="lib/4.10/init.js"></script>
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="js/map.js"></script>

</body>
</html>